﻿<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Getting information</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="./assets/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="./assets/js/html5shiv.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="./assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="./assets/ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="./assets/ico/apple-touch-icon-72-precomposed.png">
                    <link rel="apple-touch-icon-precomposed" href="./assets/ico/apple-touch-icon-57-precomposed.png">
                                   <link rel="shortcut icon" href="./assets/ico/favicon.png">
  </head>

  <body>

    <div class="container">

      <div class="masthead">
          <div style="float: right;">Logged in as: <a href="#" id="name">Meskerem Asfaw</a></div>
        <h3 class="muted">Personal health assessment questionnaire</h3>
        <br />
      </div>
	
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" id="progbar" style="width: 60%;">
                <span id="bar">60% Complete</span>
            </div>
        </div>
			  
	<div class="well" id="women">
		<legend>For women:</legend>                
                <table border="0" width ="100%" class="table table-striped">
                    <tr>
                        <td width="30%">
                            Have you given birth?
                        </td>
                        <td width="8%">
                                <div class="input-group">
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" id="1no-btn" type="button">No</button>
                                  </span>
                                </div><!-- /input-group -->
                        </td>
                        <td width="10%"></td>
                        <td>
                              <div class="input-group">
                                <span class="input-group-btn">
                                  <label for="1yes"><button class="btn btn-default" id="1yes-btn" type="button">Yes</button></label>
                                </span>
                                  <input type="text" id="1yes" class="form-control" disabled="disabled" placeholder="If yes, how many times? Year? How many caesarena?">
                              </div><!-- /input-group -->
                        </td>
                    </tr>
                    <tr>
                        <td width="30%">
                            Are you breastfeeding or are you pregnant?
                        </td>
                        <td width="8%">
                                <div class="input-group">
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" id="2no-btn" type="button">No</button>
                                  </span>
                                </div><!-- /input-group -->
                        </td>
                        <td width="10%"></td>
                        <td>
                              <div class="input-group">
                                <span class="input-group-btn">
                                  <label for="2yes"><button class="btn btn-default" id="2yes-btn" type="button">Yes</button></label>
                                </span>
                                  <input type="text" id="2yes" class="form-control" disabled="disabled" placeholder="If yes, please specify.">
                              </div><!-- /input-group -->
                        </td>
                    </tr>
                </table>
        </div>
        <div class="well">
                <legend>Is there anything else you would like to add or ask?</legend>
                <table border="0" width ="100%" class="table table-striped">
                    <tr>
                        <td>
                            <textarea class="form-control" rows="6"></textarea>
                        </td>
                    </tr>
                </table>
        </div>
        <div class="well">
            <legend>Do you use drugs or natural remedies?</legend>
                <table border="0" width ="100%" class="table table-striped">
                    <tr>
                        <td>
                            <input type="text" class="form-control" placeholder="Name of the medicine">
                        </td>
                        <td width="20%">
                            <input type="text" class="form-control" placeholder="Dosage (mg)">
                        </td>
                        <td>
                            <input type="text" class="form-control" placeholder="Amount (number per day)">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" class="form-control" placeholder="Name of the medicine">
                        </td>
                        <td>
                            <input type="text" class="form-control" placeholder="Dosage (mg)">
                        </td>
                        <td>
                            <input type="text" class="form-control" placeholder="Amount (number per day)">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" class="form-control" placeholder="Name of the medicine">
                        </td>
                        <td>
                            <input type="text" class="form-control" placeholder="Dosage (mg)">
                        </td>
                        <td>
                            <input type="text" class="form-control" placeholder="Amount (number per day)">
                        </td>
                    </tr>
                </table>
        </div>
                <br />
                <br />
                <br />
                <ul class="pager">
                  <li class="previous"><a href="./previous_general.html">&larr; Previous</a></li>
                  <li class="next"><a href="#">Submit</a></li>
                </ul>
	</div>

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="./assets/js/jquery.js"></script>
    <script src="./assets/js/bootstrap.js"></script>
    
    <script type="text/javascript">
        // Popover with hover
        $(function () {
            var showPopover = function () {
                $(this).popover('show');
            }
            , hidePopover = function () {
                $(this).popover('hide');
            };

            $("#basic-popover, #basic-popover2").popover({
                content: 'Popover content',
                trigger: 'manual'
                })
                .focus(showPopover)
                .blur(hidePopover)
                .hover(showPopover, hidePopover);
        });
        
        
        // Show/hide the div for women          
        $('#name').click(function() {
            if(document.getElementById("name").innerHTML=="Meskerem Asfaw"){$("#women").hide();
                var printedName = "Jason Tang";
                document.getElementById("name").innerHTML=printedName;
        }
        else{$("#women").show();
            var printedName = "Meskerem Asfaw";
            document.getElementById("name").innerHTML=printedName;
        }
            //var x=1;
    //var printedName = "asdf";
        //document.getElementById("name").innerHTML=printedName;
       // if(x == 2){$("#women").hide();
       // }
    });
        
        //$("#basic-tooltip").tooltip();  //Tooltips are not used at the moment
        var percentage = 80;
        // Change color on buttons, default/success
        $('#1no-btn').click(function() {
            var changePercentage = percentage + "% Complete";
            
            document.getElementById("bar").innerHTML=changePercentage;
            var elem = document.getElementById("progbar");
          elem.style.width = percentage +  "%";
          $('#1no-btn').addClass('btn-success');
          $('#1yes').prop('disabled', true);
          $('#1yes-btn').removeClass('btn-success');
          $('#1yes-btn').addClass('btn-default');
          });
        $('#1yes-btn').click(function() {
          $('#1yes-btn').addClass('btn-success');
          $('#1yes').prop('disabled', false);
          $('#1no-btn').removeClass('btn-success');
          $('#1no-btn').addClass('btn-default');
          });
        $('#2no-btn').click(function() {
          $('#2no-btn').addClass('btn-success');
          $('#2yes').prop('disabled', true);
          $('#2yes-btn').removeClass('btn-success');
          $('#2yes-btn').addClass('btn-default');
          });
        $('#2yes-btn').click(function() {
          $('#2yes-btn').addClass('btn-success');
          $('#2yes').prop('disabled', false);
          $('#2no-btn').removeClass('btn-success');
          $('#2no-btn').addClass('btn-default');
          });
        $('#3no-btn').click(function() {
          $('#3no-btn').addClass('btn-success');
          $('#3yes').prop('disabled', true);
          $('#3yes-btn').removeClass('btn-success');
          $('#3yes-btn').addClass('btn-default');
          });
        $('#3yes-btn').click(function() {
          $('#3yes-btn').addClass('btn-success');
          $('#3yes').prop('disabled', false);
          $('#3no-btn').removeClass('btn-success');
          $('#3no-btn').addClass('btn-default');
          });
        $('#4no-btn').click(function() {
          $('#4no-btn').addClass('btn-success');
          $('#4yes').prop('disabled', true);
          $('#4yes-btn').removeClass('btn-success');
          $('#4yes-btn').addClass('btn-default');
          });
        $('#4yes-btn').click(function() {
          $('#4yes-btn').addClass('btn-success');
          $('#4yes').prop('disabled', false);
          $('#4no-btn').removeClass('btn-success');
          $('#4no-btn').addClass('btn-default');
          });
        $('#5no-btn').click(function() {
          $('#5no-btn').addClass('btn-success');
          $('#5yes').prop('disabled', true);
          $('#5yes-btn').removeClass('btn-success');
          $('#5yes-btn').addClass('btn-default');
          });
        $('#5yes-btn').click(function() {
          $('#5yes-btn').addClass('btn-success');
          $('#5yes').prop('disabled', false);
          $('#5no-btn').removeClass('btn-success');
          $('#5no-btn').addClass('btn-default');
          });
        $('#6no-btn').click(function() {
          $('#6no-btn').addClass('btn-success');
          $('#6yes').prop('disabled', true);
          $('#6yes-btn').removeClass('btn-success');
          $('#6yes-btn').addClass('btn-default');
          });
        $('#6yes-btn').click(function() {
          $('#6yes-btn').addClass('btn-success');
          $('#6yes').prop('disabled', false);
          $('#6no-btn').removeClass('btn-success');
          $('#6no-btn').addClass('btn-default');
          });
        $('#7no-btn').click(function() {
          $('#7no-btn').addClass('btn-success');
          $('#7yes').prop('disabled', true);
          $('#7yes-btn').removeClass('btn-success');
          $('#7yes-btn').addClass('btn-default');
          });
        $('#7yes-btn').click(function() {
          $('#7yes-btn').addClass('btn-success');
          $('#7yes').prop('disabled', false);
          $('#7no-btn').removeClass('btn-success');
          $('#7no-btn').addClass('btn-default');
          });
        $('#8no-btn').click(function() {
          $('#8no-btn').addClass('btn-success');
          $('#8yes').prop('disabled', true);
          $('#8yes-btn').removeClass('btn-success');
          $('#8yes-btn').addClass('btn-default');
          });
        $('#8yes-btn').click(function() {
          $('#8yes-btn').addClass('btn-success');
          $('#8yes').prop('disabled', false);
          $('#8no-btn').removeClass('btn-success');
          $('#8no-btn').addClass('btn-default');
          });
        $('#9no-btn').click(function() {
          $('#9no-btn').addClass('btn-success');
          $('#9yes').prop('disabled', true);
          $('#9yes-btn').removeClass('btn-success');
          $('#9yes-btn').addClass('btn-default');
          });
        $('#9yes-btn').click(function() {
          $('#9yes-btn').addClass('btn-success');
          $('#9yes').prop('disabled', false);
          $('#9no-btn').removeClass('btn-success');
          $('#9no-btn').addClass('btn-default');
          });
        $('#10no-btn').click(function() {
          $('#10no-btn').addClass('btn-success');
          $('#10yes').prop('disabled', true);
          $('#10yes-btn').removeClass('btn-success');
          $('#10yes-btn').addClass('btn-default');
          });
        $('#10yes-btn').click(function() {
          $('#10yes-btn').addClass('btn-success');
          $('#10yes').prop('disabled', false);
          $('#10no-btn').removeClass('btn-success');
          $('#10no-btn').addClass('btn-default');
          });
        $('#11no-btn').click(function() {
          $('#11no-btn').addClass('btn-success');
          $('#11yes').prop('disabled', true);
          $('#11yes-btn').removeClass('btn-success');
          $('#11yes-btn').addClass('btn-default');
          });
        $('#11yes-btn').click(function() {
          $('#11yes-btn').addClass('btn-success');
          $('#11yes').prop('disabled', false);
          $('#11no-btn').removeClass('btn-success');
          $('#11no-btn').addClass('btn-default');
          });
        $('#12no-btn').click(function() {
          $('#12no-btn').addClass('btn-success');
          $('#12yes-btn').removeClass('btn-success');
          $('#12yes-btn').addClass('btn-default');
          });
        $('#12yes-btn').click(function() {
          $('#12yes-btn').addClass('btn-success');
          $('#12no-btn').removeClass('btn-success');
          $('#12no-btn').addClass('btn-default');
          });
        $('#13no-btn').click(function() {
          $('#13no-btn').addClass('btn-success');
          $('#13yes').prop('disabled', true);
          $('#13yes-btn').removeClass('btn-success');
          $('#13yes-btn').addClass('btn-default');
          });
        $('#13yes-btn').click(function() {
          $('#13yes-btn').addClass('btn-success');
          $('#13yes').prop('disabled', false);
          $('#13no-btn').removeClass('btn-success');
          $('#13no-btn').addClass('btn-default');
          });
        $('#14no-btn').click(function() {
          $('#14no-btn').addClass('btn-success');
          $('#14yes-btn').removeClass('btn-success');
          $('#14yes-btn').addClass('btn-default');
          });
        $('#14yes-btn').click(function() {
          $('#14yes-btn').addClass('btn-success');
          $('#14no-btn').removeClass('btn-success');
          $('#14no-btn').addClass('btn-default');
          });
        $('#15no-btn').click(function() {
          $('#15no-btn').addClass('btn-success');
          $('#15yes-btn').removeClass('btn-success');
          $('#15yes-btn').addClass('btn-default');
          });
        $('#15yes-btn').click(function() {
          $('#15yes-btn').addClass('btn-success');
          $('#15no-btn').removeClass('btn-success');
          $('#15no-btn').addClass('btn-default');
          });
    </script>

  </body>
</html>
